<template>
  <div id="header">
    <div class="leftTool">
      <i class="iconfont metro-dingwei" style="color: #eb9a02"></i>
      <span style="margin-right: 20px; margin-left: 10px">武汉市</span>
      <span style="margin-right: 15px; margin-left: 15px; letter-spacing: 2px">{{
        currentDate
      }}</span>
      <span style="margin-right: 15px; margin-left: 15px">{{ currentWeek }}</span>
      <span style="margin-right: 15px; margin-left: 15px">{{
        currentSecond
      }}</span>
    </div>
    <div class="title">地铁三维可视化管控平台</div>
    <div class="rightTool">
      <i :class="['iconfont', weatherIcon, 'icon']"></i>
      <span style="margin: 0 10px">{{ weather }}</span>
      <span>{{ temp }}℃</span>
    </div>
  </div>
</template>
<script setup>
import dayjs from "dayjs";
import { ref, onMounted, computed, onUnmounted } from "vue";
import { getWeatherHttp } from "@/api/WeatherURL.js";

const weekMap = {
  Monday: "星期一",
  Tuesday: "星期二",
  Wednesday: "星期三",
  Thursday: "星期四",
  Friday: "星期五",
  Saturday: "星期六",
  Sunday: "星期日",
};

let currentDate = ref(dayjs().format("YYYY/MM/DD"));
let currentWeek = ref(weekMap[dayjs().format("dddd")]);
let currentSecond = ref(dayjs().format("hh:mm:ss"));
let timer = ref(null);
const weather = ref("晴");
const temp = ref(0);
const weatherMap = {
  晴: "icon-qing",
  小雨: "icon-xiaoyu1",
  中雨: "icon-zhongyu1",
  大雨: "icon-dayu1",
  阴: "icon-yin",
  多云:"icon-duoyun",
};
const weatherIcon = computed(() => {
  return weatherMap[weather.value];
});


onMounted(async () => {
  timer.value = setInterval(() => {
    currentDate.value = dayjs().format("YYYY/MM/DD");
    currentWeek.value = weekMap[dayjs().format("dddd")];
    currentSecond.value = dayjs().format("hh:mm:ss");
  }, 100);
  const weatherInfo = await getWeatherHttp(420100);
  weather.value = weatherInfo.lives[0]?.weather || "晴";
  temp.value = weatherInfo.lives[0]?.temperature || 0;
});

onUnmounted(() => {
  timer.value && clearInterval(timer.value);
});
</script>
<style scoped lang="scss">
#header {
  width: 100%;
  height: 57px;
  position: absolute;
  top: 0;
  left: 0;
  background: url("/src\\assets\\uiResources\\header.png");
  background-size: cover;
  display: flex;
  justify-content: center;
}

.title {
  font-family: "等线Bold";
  font-size: 26px;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 2px;
  background: rgb(255, 255, 255);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 9%,
    rgba(211, 156, 50, 1) 57%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 3px;
}

.leftTool {
  width: 26%;
  height: 70%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  color: #fff;
  padding-left: 20px;
  font-size: 15px;
}

.rightTool {
  width: 26%;
  height: 70%;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 12px;
  color: #fff;
  margin-right: 20px;
}

.icon {
  font-family: "等线Bold";
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  background: rgb(255, 255, 255);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 9%,
    rgba(211, 156, 50, 1) 57%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 6px;
}
</style>
